<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li 
    :class="{'completed' : item.state === true ? true : false}"  
    v-for="(item,index) in stateList" :key='index' >
      <div class="view">
        <input :checked='item.state' class="toggle" type="checkbox"  @click="$store.commit('setTaskState', index)"/>
        <label>{{ item.taskName }}</label>
        <button class="destroy" @click="deltask(index)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  
  computed: {
    ...mapGetters(['stateList'])
  },
  methods:{
    deltask(index){
      this.$store.commit('deltask',index)
    }
  }
}
</script>
